前面几节的内容介绍了Map
,View
,Source
,Layer
,这些其实我们都是要么在对象属性中设置 ,要么是通过方法设置,实质上是通过共享的全局变量设置地图包含的图层,地图的显示效果,但是如果真正上绘制在浏览器上,需要渲染在canvas(ol3常用的渲染方式).
由于源码代码量比较大,这里只是从大部分介绍流程。
网上有人(OpenLayers 3源码那些事)总结一张图的不错,这里拿来用一下
0.从map.js
开始
- 1) render/renderSync
具体流程用注释的形式标出
1 | //renderSync是异步的,同样道理 |
- 2) animationDelay_
1 | this.animationDelay_ = function() { |
- 3) renderFrame_
1 | ol.Map.prototype.renderFrame_ = function(time) { |
下面讲诉的渲染的第3步 renderFrame(frameState)
有关渲染的源代码在ol/ol/render
,ol/ol/renderer
下。ol/ol/render
文件夹下是渲染的基本属性和方法,利用设计模式中的工厂模式,用来构造ol/ol/renderer
。
1.渲染Map
ol/ol/renderer/maprenderer.js
1 | ol.renderer.Map = function(container, map) {} |
这只是个父类,具体实现类位置在:ol/ol/renderer/canvas/canvasmaprenderer.js
–ol.render.canvas.Map(默认)ol/ol/renderer/canvas/webglmaprenderer.js
–ol.render.webgl.Mapol/ol/renderer/canvas/dommaprenderer.js
–ol.render.dom.Map
主要介绍第一种ol/ol/renderer/canvas/canvasmaprenderer.js
1 | ol.renderer.canvas.Map = function(container, map) { |
渲染逻辑1
ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {}
2.渲染Layer
ol/ol/renderer/layerrenderer.js
1 | ol.renderer.Layer = function(layer) { |
这只是个父类,具体实现类位置在:ol/ol/renderer/canvas/canvaslayerrenderer.js
–ol.render.canvas.Layer(默认)ol/ol/renderer/canvas/webgllayerrenderer.js
–ol.render.webgl.Layerol/ol/renderer/canvas/domlayerrenderer.js
–ol.render.dom.Layer
主要介绍第一种ol.render.canvas.Layer(默认):
这个类又分为三种类型:
- ol.render.canvas.TileLayer
- ol.render.canvas.VectorLayer
- ol.render.canvas.VectorTileLayer
ol.render.canvas.TileLayer
渲染逻辑
1 | ol.renderer.canvas.TileLayer.prototype.prepareFrame = function( |
参考文献: